<template>
    <div>
        <!-- 金额资料数据 -->
        <div>
            <div>
                <div id="test">
                    总金额
                <p>1600</p>
                    
                </div>
                <div id="test">
                    总销售奖励
                    <p>0</p>
                </div>
                <div id="test">
                    总管理金额
                    <p>1000</p>
                </div>
                <div id="test">
                    总提现金额
                    <p>600</p>
                </div>
            </div>
            <div>
                <span>姓名：</span>
                <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    :fetch-suggestions="querySearch"
                    placeholder="姓名查询"
                    :trigger-on-focus="false"
                    @select="handleSelect">
                </el-autocomplete>
            </div>
            <div>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
            </div>
        </div>
        <!-- 数据表 -->
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="大客户" name="first">
                    <el-table
                        :data="tableData"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="ID2"
                            label="ID"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name2"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number3"
                            label="手机号">
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            label="代理级别"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="area2"
                            label="代理区域"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number4"
                            label="管理津贴"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number5"
                            label="提现金额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number6"
                            label="销售奖励"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number7"
                            label="总金额"
                            width="180">
                        </el-table-column>
                        
                        <el-table-column
                            prop="operate"
                            label="操作"
                            width="180">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合伙人" name="second">
                    <el-table
                        :data="tableData"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="ID2"
                            label="ID"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name2"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number3"
                            label="手机号">
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            label="代理级别"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="area2"
                            label="代理区域"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number4"
                            label="管理津贴"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number5"
                            label="提现金额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number6"
                            label="销售奖励"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="number7"
                            label="总金额"
                            width="180">
                        </el-table-column>
                        
                        <el-table-column
                            prop="operate"
                            label="操作"
                            width="180">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                
                
            </el-tabs>
            <el-button type="primary">导出数据到Excel</el-button>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
            </el-pagination>
        </div>
    </div>
    
</template>